<template>
	<van-popup class="cate-popup" position="bottom" v-model="showNotic">
		<div class="cate-box">

			<div class="cate-fixed">
				<van-row class="cate-title pd-all" type="flex" justify="space-between">
					<van-col span="21" tag="h3">{{cate.name}}</van-col>
					<van-col span="2" class="text-right" @click="showNotic = false"><van-icon name="cross" /></van-col>
				</van-row>
				<van-row class="cate-nums" type="flex" justify="space-between">
					<van-col span="18" tag="span">已售{{parseFloat(sales)}} | 门市价 ￥{{parseFloat(origin_price)}} <em v-if="!isVisitorPrice">| 建议零售价 ￥{{parseFloat(sale_price)}}</em></van-col>
					<van-col 
						span="6" 
						tag="span" 
						class="cate-share" 
						@click="shareTips"
					>
						<van-icon class-prefix="ucai-icon" name="fenxiang1"/> 分享
					</van-col>
				</van-row>
			</div>
			<div class="cate-notic" v-if="info">
				<div 
					v-for="(rule, index) in info" 
					:key="index"
					class="notic-rule" 
					:class="index > 0 && 'van-hairline--top'"
					v-show="rule.is_show"
				>
					<h4>{{rule.title}}</h4>
					<van-row 
						tag="p" 
						type="flex" 
						justify="space-between"
						v-show="rule.desc"
					>
						<van-col tag="label" span="6">重要说明</van-col>
						<van-col tag="span" span="18" v-html="rule.desc"></van-col>
					</van-row>
					<van-row 
						tag="p" 
						type="flex" 
						justify="space-between"
						v-for="(rule_child, index) in rule.children"
						:key="index"
						v-show="rule_child.is_show"
					>
						<van-col tag="label" span="6">{{rule_child.title}}</van-col>
						<van-col tag="span" span="18" v-html="rule_child.desc"></van-col>
					</van-row>
				</div>
			</div>

    </div>

		<van-goods-action class="van-hairline--top" v-if="showBuyBtn">
			<div class="c-gray-l pd-lft bottom-price">
				价格：<span class="c-buy">￥</span><b class="c-buy">{{parseFloat(cate.trade_price)}}</b>
			</div>
			<van-goods-action-button 
				:type="isVisitorPrice ? 'buy-customer' : 'buy'"
				:text="isVisitorPrice ? '立即预订' : '立即采购'" 
				@click="gotopage('booking')"
			/>
		</van-goods-action>
		
	</van-popup>
</template>
<script>
import { 
	Popup,
	Icon,
	Button,
	Row,
	Col,
	GoodsAction,
	GoodsActionButton
 } from "vant";
 import {
    getProdCate
} from '@/api/modules/product'

import { getRolePrice } from '@utils/role'

export default {
	name: 'cate-notic',
	components: {
		[Popup.name]: Popup,
		[Icon.name]: Icon,
		[Button.name]: Button,
		[Row.name]: Row,
		[Col.name]: Col,
		[GoodsAction.name]: GoodsAction,
		[GoodsActionButton.name]: GoodsActionButton,
	},
	props: {
		prodId: {
			type: Number,
			default: 0
		},
		cate: {
			type: Object,
			default: {}
		},
		showBuyBtn: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		cate: {
			handler() {
				this.loadCate()
			},
			deep: true
		}
	},
	data() {
		return {
			origin_price: 0,
			sale_price: 0,
			sales: 0,
			showNotic: false,
			info: null,
			isVisitorPrice: getRolePrice() === '0',
			secret: this.$getUrlParam('secret'), // 加密字符串
		}
	},
	methods: {
		init() {
			this.showNotic = true
		},
		async loadCate() {
			getProdCate(this.cate.id)
			.then(res => {
				this.info = res.data.booking_info
				this.origin_price = res.data.origin_price
				this.sale_price = res.data.sale_price
				this.sales = res.data.sales
			})
		},
		gotopage (url) {
			this.$goPage(url, {
				product_id: this.prodId,
				package_id: this.cate.id,
				secret: this.isVisitorPrice ? this.secret : ''
			})
		},
		shareTips () {
			this.$parent.shareTips = true
		}
	}
}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
@color-title: #000;
.cate-popup {
	height: 85%;
	background: @white;
	border-radius: @radius-lg @radius-lg 0 0;
	padding-bottom: 50px;
	overflow: hidden;
	
	.cate-box{
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		z-index: 9;
	}
	.cate-fixed{
		width:100%;
	}
	.cate-title {
		h3 {
			color: @color-title;
			font-size: @font-size-lg;
		}
		i {
			color: #ccc;
			font-size: 20px;
		}
	}
	.cate-nums {
		padding: 0 0 15px 15px;
		line-height: 1;
		color: @gray-9;
		border-bottom: @border-default;
		& > * {
			padding: 5px 0;
		}
		.cate-share {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f8f8f8;
			padding: 5px 15px;
			border-radius: 15px 0 0 15px;
			color: @color-main;
			.ucai-icon{
				    margin-right: 4px;
			}
		}
	}
	.cate-notic {
		font-size: @font-size-md;
		overflow-y: auto;
		-webkit-overflow-scrolling:touch;
		width:100%;
		height: calc(100vh);
		position: relative;
		z-index: 1;
		.notic-rule {
			padding: 15px;
			margin-top: 5px;
			&:last-child{
				border-bottom: 0;
				margin-bottom: 30px;
			}
			h4 {
				color: @color-title;
				font-size: @font-size-lg;
				margin-bottom: 10px;
			}
			p {
				margin: 5px 0;
			}
			label {
				color: @gray-9;
			}
			.cate-info-tag {
				display: inline-block;
				padding: 1px 3px;
				border-radius: 2px;
				background-color: @color-main;
				color: @white;
			}
		}
	}
	
	.bottom-price {
		b {
			font-size: 18px;
		}
	}

	.van-button {
		flex: 0 0 117.5px;
	}
}
</style>